<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page contentType="text/html; charset=utf-8" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<script src="../js/jquery-1.4.3.js" type="text/javascript">
	</script>
	<script src="../js/jquery.blockUI.js" type="text/javascript">
	</script>
	<style>
		*{ margin:0; padding:0;}
		body{ background:#f0f0f0; font:12px Arial, Helvetica, sans-serif; color:#505050; }
		#login_box { width:280px;  display:none; padding-bottom:20px; position:relative; text-align:left; }
		#login_box fieldset { border:0 none; }
		.close { position:absolute; right:8px; top:0; display:block; width:33px; height:17px; background:url('../../resource/image/close.png') no-repeat; text-indent:-9999px; outline:none; }
		.top_h4 { font-size:16px; background:url(../../resource/image/login_box_title_bg.png) repeat-x; line-height:36px; margin-bottom:20px; letter-spacing:1px; text-indent:23px; color:#232324; }
		.label { padding-left:23px; }
		.label p { font-size:13px; margin-bottom:10px; }
		.label input { background:#f7f7f7; width:227px; height:20px; padding-top:2px; padding-left:3px; border:1px solid #caedbe; margin-bottom:20px; font:12px "Bitstream Vera Sans", "Trebuchet MS", Geneva, Verdana, Arial, Helvetica, sans-serif; }
		.label input:hover, .label input:focus { border:1px solid #b2e06e; }
		#login_box fieldset span a { text-align:center; margin-right:15px; font-size:12px; width:auto; line-height:24px; display:block; float:left; text-decoration:none; color:#63aa49; }
		#login_box span a:hover { color:#000; }
		#login_box .button2 a { width:65px; background:url(images/button2.gif) no-repeat; color:#232324; margin-left:23px !important; margin-left:11px; }
		#login_box .button2 a:hover { text-decoration:none; background:#7e7e7d; color:#fff; }
		#wrapper{ width:360px; padding:20px; margin:10% auto 0; background:#fff; border:1px solid #e0e0e0;}
		h1,h3{ margin-bottom:10px; font-size:20px;}
		h6{ font-weight:normal; font-size:12px; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid #e0e0e0;}
		h6 a{  color:#505050; }
		button{ margin-right:20px;}
		#displayBox{ display:none;} 
		#box{ width:600px; margin:0 auto; background:#fff; border:1px solid #ccc; padding:20px; display:none; -webkit-border-radius: 10px;-moz-border-radius: 10px; display:none; } 
		#box p{ margin-bottom:20px;}
	</style>
  <head>
    <title>用户登录界面</title>
		<style type="text/css">
		body {
			background:url('../resource/image/login_back.gif') WIDTH: 100%; HEIGHT: 100%;
		}
	</style>
  </head>
  
  <body>
	<div id="login_box">
	  <fieldset>
	    <h4 class="top_h4">会员注册</h4>
	    <a href="#" class="close" title="关闭">close</a>
	    <div class="label">
	      <p>用户名</p>
	      <input id="username1" name="username1" type="text" />
	    </div>
	    <div class="label">
	      <p>密 码</p>
	      <input id="password1" name="password1" type="password"/>
	    </div>
	    <span class="button2"><a href="#">注册</a></span><span><a href="#">忘记密码</a></span>
	  </fieldset>
	</div>
  <center>
  <form id="loginForm" name="loginForm" action="../login/user_login.do" method="post">
    	<table align="center" width="40%" height="10%">
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">&nbsp;</tr>
    		<tr align="center">
    			<td><font color="white">用户名:</font> </td>
    			<td><input id="username" name="user.username" type="text" value="" width="20%" ></td>
    		</tr>
    		<tr align="center">
    			<td><font color="white">密&nbsp;码:</font> </td>
    			<td><input id="password" name="user.password" type="password" value="" width="20%" ></td>
    		</tr>
    		<tr><td></td><td align="right"><input type="button" value="注册" onclick="register();" /> <input id="loginButton" type="button" value="登录" onclick="checkValid();" /> </td></tr>
    	</table>
    </form>
   </center>
  </body>
  <script type="text/javascript">
  	function checkValid(){
  		var userText = document.getElementById("username").value;
  		var pwdText = document.getElementById("password").value;
  		if(userText==""){
  			alert("用户名不能为空");
  			return;
  		}
  		if(pwdText==""){
  			alert("密码不能为空");
  			return;
  		}
  		try{
	     $.blockUI({css: { 
	         border: 'none', 
	         padding: '15px',
	         backgroundColor: '#000', 
	         '-webkit-border-radius': '10px', 
	         '-moz-border-radius': '10px', 
	         opacity: .5, 
	         color: '#fff' 
         }});
       	$('.blockOverlay').attr('title','单击关闭').click($.unblockUI);
  		document.loginForm.submit();
  		}catch(e){
  			alert(e.name + ": " + e.message);
  		}
  		// return;
  	}
  	function register(){
  		$.blockUI({ message: $('#login_box') }); 
		$('.blockOverlay').attr('title','单击关闭').click($.unblockUI); 
		$('.close').click($.unblockUI);
  	}
  </script>
</html>
